<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 系统工具</el-breadcrumb-item>
                <el-breadcrumb-item>本地数据库设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-loading="loading">
            <div>
                <el-row class="mt20">
                    <el-col :span="2"><span>IP地址：</span></el-col>
                    <el-col :span="4"><el-input v-model="ip"></el-input></el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="2"><span>端口：</span></el-col>
                    <el-col :span="4"><el-input v-model="port"></el-input></el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="2"><span>sid：</span></el-col>
                    <el-col :span="4"><el-input v-model="sid"></el-input></el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="2"><span>用户名：</span></el-col>
                    <el-col :span="4"><el-input v-model="username"></el-input></el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="2"><span>密码：</span></el-col>
                    <el-col :span="4"><el-input type="password" v-model="password"></el-input></el-col>
                </el-row>
                <div class="btn-container3">
                    <el-button type="primary" @click="update" :loading="btnloading">更新</el-button><span class="updatewarn">（新配置重启生效）</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            ip:"",
            port:"",
            sid:"",
            username:"",
            password:"",
            btnloading: false,
            loading: false
        }
    },
    mounted(){
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
        this.getCurrentDB();
    },
    computed: mapState({
        msg: state => state.system.msg,
        localDB: state => state.system.localDB,
        verifyCode: state => state.system.verifyCode
    }),
    methods:{
        getCurrentDB() {
            this.loading = true;
            this.$store.dispatch('getLocaleDB', {
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                if(this.verifyCode == 9999995) {
                    this.$message("请先登录");
                    this.$router.push({ path: "/login" });
                }else{
                    this.loading = false;
                    this.ip = this.localDB.ip;
                    this.port = this.localDB.port;
                    this.sid = this.localDB.sid;
                    this.username = this.localDB.username;
                    this.password = this.localDB.password;
                }
            })
        },
        update() {
            this.btnloading = true;
            this.$store.dispatch('updateLocaleDB', {
                ip: this.ip,
                port: this.port,
                sid: this.sid,
                username: this.username,
                password: this.password,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.btnloading = false;
                this.$message(this.msg);
            })
        }
    }
}
</script>
<style>
.btn-container3{
    margin: 40px 0 0 156px;
}
.updatewarn{
    font-size: 12px;
    margin-left: 10px;
}
input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>

